﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <script type="text/javascript" charset="utf-8" src="MySimpleValidate.js"></script>
        <script type="text/javascript" charset="utf-8" src="lang_cn.js"></script>
        <link rel="stylesheet" type="text/css" href="MySimpleValidate.css"/>
        <style>
            input[type="text"],
            input[type="password"],
            textarea
            {
                border: 1px solid #cccccc; 
            }
        </style>
    </head>

    <script type="text/javascript">
        $(function(){
            $("#reg_uname").SetValidateRules({
                required:true,
                //maxlength:10,
                //minlength:5,
                isemail:true
            });
			
			$("#reg_uname").SetAjaxValidate({
                url:"test1.php",
				type:"post",
				success_msg:"",
				failed_msg:"失败!"
            });
			
            $("#reg_upwd").SetValidateRules({
                required:true,
                maxlength:20,
                minlength:6,
                expression:[{
                        "exp":/^.*[A-Z].*$/,
                        "msg":"必须包含一个大写字母"
                    },{
                        "exp":/^.*[!@#$%^&].*$/,
                        "msg":"必须包含一个非法字符（例如：!@#$%^&）"
                    }]
            });

            $("#reg_confirm_upwd").SetValidateRules({
                required:true,
                sameas:"reg_upwd",
                sameas_msg:"两次输入密码必须相同"
            });
 
            $("#reg_date").SetValidateRules({
                expression:[{
                        "exp":/^(19|20)\d\d([-])(0[1-9]|1[012])[-](0[1-9]|[12][0-9]|3[01])$/,//非严格
                        "msg":"无效的日期"
                    }]
            });
            
            $("#register").click(function(){
                var ok=true;
				$("#reg_uname").DoAjaxValidate();
                ok= $("#reg_uname").DoValidate()&&ok;
                ok= $("#reg_upwd").DoValidate()&&ok;
                ok= $("#reg_confirm_upwd").DoValidate()&&ok;
                ok= $("#reg_date").DoValidate()&&ok;

                if(ok){
                    alert("everything is ok");
                }
            });
        });
    </script>
    说明：<br />
    使用前，先引入jquery,MySimpleValidate.js,MySimpleValidate.css和语言文件lang_cn.js<br />

    &lt;script type=&quot;text/javascript&quot; 
    src=&quot;http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js&quot;&gt;&lt;/script&gt;<br />
    &lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;
    src=&quot;about:blankMySimpleValidate.js&quot;&gt;&lt;/script&gt;<br />
    &lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot; 
    src=&quot;about:blanklang_cn.js&quot;&gt;&lt;/script&gt;<br />
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;MySimpleValidate.css&quot;/&gt;<br />
    首先对某个元素设置验证规则，验证规则表如下：<br />
    <table border="1" style="width:80%;">
        <thead>
            <tr>
                <th>方法/参数规则</th>
                <th >说明</th>
                <th>是否必须</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>SetValidateRules(rules)</td>
                <td>设置参数规则</td>
                <td>否</td>
            </tr>
            <tr>
                <td>DoValidate()</td>
                <td>验证，返回true或者false</td>
                <td>否</td>
            </tr>
            <tr>
                <td>required</td>
                <td>值为false，或true。默认为false</td>
                <td>否</td>
            </tr>
            <tr>
                <td>maxlength</td>
                <td>最大长度</td>
                <td>否</td>
            </tr>
            <tr>
                <td>minlength</td>
                <td>最小长度</td>
                <td>否</td>
            </tr>
            <tr>
                <td>expression</td>
                <td>一个Json数据数组，Json数据有2个键值对，分别表示正则表达式和验证未通过所提示的信息。 
                    例如：  <pre>
expression:[{
        "exp":/^.*[A-Z].*$/,
        "msg":"必须包含一个大写字母"
    },{
        "exp":/^.*[!@#$%^&].*$/,
        "msg":"必须包含一个非法字符（例如：!@#$%^&）"
    }]
                    </pre>
                    数组有2个元素，表示2种验证规则。任何一个正则表达式未匹配，则该验证为通过。</td>
                <td>否</td>
            </tr>
            <tr>
                <td>sameas</td>
                <td>表示此验证元素必须和指定的元素的值一致。sameas使用的是指定元素的id值例如：sameas:"reg_upwd",表示和id为reg_upwd的值相同。</td>
                <td>否</td>
            </tr>
            <tr>
                <td>sameas_msg</td>
                <td>当使用sameas的时，验证未通过的时候提示消息设置。</td>
                <td>否</td>
            </tr>
        </tbody>
    </table>
    <pre>
设置完成后，脱离焦点的时候，会自动触发验证，并且显示验证信息。验证信息的显示是在验证元素之后加上&quot;<span style="color:#a31515;">&lt;span</span> <span style="color:red;">class</span>=<span style="color:blue;">'valid_msg'</span><span style="color:#a31515;">&gt;</span>信息<span style="color:#a31515;">&lt;</span><span style="color:#a31515;">/span&gt;</span>&quot;。
手动触发验证消息，只需调用DoValidate方法，该方法会返回true或者false。
    </pre>
    <table>
        <tr>
            <td><label for="reg_uname" >邮箱：</label></td>
            <td><input id="reg_uname"type="text"  value="" /></td>
        </tr>
        <tr>
            <td> <label for="reg_upwd">
                    密码：</label></td>
            <td><input id="reg_upwd"   type="password" /></td>
        </tr>
        <tr>
            <td> <label for="reg_confirm_upwd" >
                    确认密码：</label></td>
            <td><input id="reg_confirm_upwd"  type="password"  /></td> 
        </tr>
        <tr>
            <td> <label for="reg_date" >
                    日期(yyyy-MM-dd)：</label></td>
            <td><input id="reg_date" type="text"  /></td> 
        </tr>
    </table>
    <div>
        <input id="register" type="button" value="注册"  />
    </div>

</body>
</html>
